<template>
  <div id="coupon">
    <div class="bgc">
      <van-row>
        <van-col span="24">
          <van-nav-bar title="全部优惠券" left-text="返回" left-arrow @click-left="onClickLeft" />
        </van-col>
        <van-col span="24">
          <van-tabs>
            <van-tab title="未使用">
              <van-col span="24" class="search">
                <van-cell-group>
                  <van-field center clearable placeholder="请输入短信验证码">
                    <template #button>
                      <van-button size="small" type="primary">兑换</van-button>
                    </template>
                  </van-field>
                </van-cell-group>
              </van-col>
              <span class="explain w"> <van-icon name="question-o" /> 使用说明</span>
              <van-col span="24" class="Coupons-centenr w">
                <van-row v-for="(item, index) in CouponList" :key="item.id" class="box1">
                  <van-col>
                    <div class="top-span">
                      <span>{{ item.tag }}</span>
                    </div>
                    <div class="top-p">{{ item.discount }}元</div>
                    <div class="top-max">满{{ item.min }}元使用</div>
                  </van-col>
                  <van-col class="Coupons-centenr-text">
                    <p class="text-p1">{{ item.name }}</p>
                    <p class="text-p2">有限期：{{ item.tag }}</p>
                  </van-col>
                  <van-col span="24">
                    <p class="text-p3">{{ item.desc }}</p>
                  </van-col>
                </van-row>
              </van-col>
            </van-tab>
            <van-tab title="已使用"></van-tab>
            <van-tab title="已过期"></van-tab>
          </van-tabs>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
export default {
  name,
  data() {
    return {
      count: 0,
      isLoading: false,
      CouponList: {}
    }
  },
  mounted() {
    this.onGetCouponList()
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功')
        this.isLoading = false
        this.count++
      }, 1000)
    },
    onGetCouponList() {
      let data = {
        page: 1,
        limit: 100,
        order: 'asc'
      }
      this.$get('coupon/list', data)
        .then(result => {
          this.CouponList = result.data.data.list
          console.log(this.CouponList)
        })
        .catch(err => {})
    }
  }
}
</script>
<style lang="less" scoped>
.search {
  margin: 20px 0px;
  .van-field__body {
    input {
      border: 1px solid #000 !important;
    }
    .van-button {
      width: 100px;
    }
  }
}
.explain {
  font-size: 13px;
  margin: 0px 5px 0px 5px;
  float: right;
  opacity: 0.5;
}
// 优惠券内容
.Coupons-centenr {
  border-bottom: 1px solid #e5e4e2;
  padding-bottom: 15px;
  .van-row {
    background: linear-gradient(to right, #cea667, #dfbb76);
    padding-top: 0.05rem;
    margin: 15px 0px;
    .text-p3 {
      color: red !important;
    }
    .Coupons-centenr-text {
      font-weight: 100;
      margin-left: 0.2rem;
      .text-p1 {
        font-size: 25px;
        color: #fff;
        margin: 28px 0px 0px 0px;
      }
      .text-p2 {
        font-size: 10px;
        font-weight: 100;
        color: #fff;
      }
    }

    .top-span {
      span {
        width: 40px;
        font-size: 5px !important;
        background-color: #9c7733;
        padding: 3px 7px;
        color: #f4f4f4;
        transform: scale(0.8);
        display: block;
      }
    }
    .top-max {
      font-size: 14px;
      color: #fff;
      font-weight: 100;
      margin-left: 15px;
      margin-top: 5px;
    }
    .top-p {
      font-size: 0.3rem;
      color: #a73e25;
      margin-left: 15px;
    }
  }
}
</style>
